﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="FormTest.aspx.cs" Inherits="JqueryForm.FormTest" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <script type="text/javascript" src="js/jquery.form.js"></script>
    <script type="text/javascript" src="js/jquery.query-2.1.7.js"></script>
    <script type="text/javascript" src="js/common.js"></script>
    <link href="css/login.css" />
    <title>form跨页面提交</title>
    <script type="text/javascript">
        var flag = true;
        // pre-submit callback 
        function showRequest(formData, jqForm, options) {
            if ($('input[type="file"]').val() == "") {
                var leng = getTextLength($("#reply").val());
                if (leng < 1) {
                    alert("回复内容不得少于1个汉字的长度");
                    $("#reply").focus();
                    flag = true;
                    return false;
                }
            }

            return true;
        }
        // post-submit callback 
        function showResponse(responseText, statusText, xhr, $form) {
            if (responseText != null) {
                var jsonR = eval(responseText);
                var str = jsonR.name + "在此留言，内容：" + jsonR.reply + ",他使用密码：" + jsonR.pass + ",并上传附件名称为：" + jsonR.filename + "";
                $("#result").val(str)

            }
            flag = true;
        }

        $(document).ready(function () {
            var options = {
                target: '#btnSave',   // target element(s) to be updated with server response 
                beforeSubmit: showRequest,  // pre-submit callback 
                success: showResponse,  // post-submit callback 
                type: 'post',        // 'get' or 'post', override for form's 'method' attribute 
                dataType: 'json',      // 'xml', 'script', or 'json' (expected server response type) 
                url: 'handler/Handler.ashx?act=PostReply'   // override for form's 'action' attribute 
                //clearForm: true        // clear all form fields after successful submit 
                //resetForm: true        // reset the form after successful submit 
                // $.ajax options can be used here too, for example: 
                //timeout:   3000 
            };

            $("#btnSave").click(function () {
                if (flag) {
                    flag = false;
                    $("#form1").ajaxSubmit(options);
                }
            });
        });

    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        用户名：
        <input type="text" name="rname" />
        密码：<input type="password" name="rpassport" />
        留言:<textarea class="txBox" id="reply" name="scontent"></textarea>
        附件：<input type="file" name="postfile" />
        <a href="javascript:void(0)" id="btnSave" class="btn">提交</a>
    </div>
    </form>
    <div id="loginBox">
        <div class="tit">
            登陆以后，更多精彩<a id="closeBox" href="javascript:;"></a></div>
        <div class="l">
            已有账号，立即<a>登陆</a></div>
        <div class="r">
            <p>
                没有名品账号？</p>
            <a></a><a class="b2"></a>
        </div>
        <ul>
            <li><a>
                <img src="1.jpg" width="120" height="90"><p>
                    测试测试测试测试</p>
            </a></li>
            <li><a>
                <img src="1.jpg" width="120" height="90"><p>
                    测试测试测试测试</p>
            </a></li>
            <li class="last"><a>
                <img src="1.jpg" width="120" height="90"><p>
                    测试测试测试试测</p>
            </a></li>
        </ul>
    </div>
    <div id="shade">
    </div>
    <script src="js/login.js"></script>
</body>
</html>
